<template>
    <view class="allPage">
        <view class="content">
            <view class="parts">
                <view class="line">
                    <view class="l">
                        <text class="b">地址</text>
                    </view>
                    <view class="r" @click="goMap">
                        <view class="flex">
                            <view class="con flex-1">
                                <view v-if="json.latitude">
                                    <view class="name">
                                        {{ json.location }}
                                    </view>
                                    <text class="address">
                                        {{ json.deliveryAddress }}
                                    </text>
                                </view>

                                <text class="col" v-else>选择收货地址</text>
                            </view>

                            <text class="iconfont icon-xiangyou-copy11 icon"></text>
                        </view>
                    </view>
                </view>

                <view class="line">
                    <view class="l">
                        <text class="b">地址补充</text>
                    </view>
                    <view class="r">
                        <input type="text" v-model="json.houseNumber" placeholder-class="holderClass" placeholder="填写地址补充，如：菜鸟驿站" />
                    </view>
                </view>

                <view class="line">
                    <view class="l">
                        <text class="b">联系人</text>
                    </view>
                    <view class="r">
                        <view class="flex">
                            <input type="text" v-model="json.contacts" maxlength="50" placeholder-class="holderClass" placeholder="填写收货人姓名" class="flex-1" />
                            <view>
                                <radio-group @change="radioChange">
                                    <label class="radio">
                                        <radio :value="1" style="transform: scale(0.7)" :checked="json.sex == 1" />
                                        先生
                                    </label>
                                    <label class="radio">
                                        <radio :value="0" style="transform: scale(0.7)" :checked="json.sex == 0" />
                                        女生
                                    </label>
                                </radio-group>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="line">
                    <view class="l">
                        <text class="b">手机号</text>
                    </view>
                    <view class="r none">
                        <input v-model="json.contactsPhone" type="tel" maxlength="11" placeholder-class="holderClass" placeholder="填写正确的收货人号码" />
                    </view>
                </view>
            </view>
            <view class="parts bottm">
                <view class="line">
                    <view class="l">
                        <text class="b">标签</text>
                    </view>
                    <view class="r none">
                        <view class="tags">
                            <text class="i" v-for="item in tagArr" :class="{ active: json.label == item.id }" :key="item.id" @click="switchLabel(item)">
                                {{ item.name }}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="line">
                    <view class="l">
                        <text class="b">默认</text>
                    </view>
                    <view class="r none">
                        <view class="tags">
                            <text class="i full" :class="{ active: json.isDefault == 1 }" @click="switchDefault">默认此地址</text>
                        </view>
                    </view>
                </view>

                <view style="margin-top: 20px">
                    <button class="transBg" style="border-radius: 30px; border: none; color: #fff" @click="goSave">保存</button>

                    <button v-if="editId" style="margin-top: 40rpx; border-radius: 30px; border: 1rpx solid #eaeaea; background-color: #ffff; color: #ff0000" @click="delItem">删除</button>
                </view>
            </view>
        </view>

        <PrivacyContract ref="PrivacyContract" @finish="goChoose" />
    </view>
</template>
<script>
    const app = getApp();
    import PrivacyContract from '@/components/PrivacyContract';
    export default {
        components: { PrivacyContract },
        data() {
            return {
                positionInfo: {},
                editId: undefined,
                json: {
                    sex: 1,
                    id: undefined,
                    location: undefined,
                    deliveryAddress: undefined,
                    houseNumber: undefined,
                    contactsPhone: undefined,
                    contacts: undefined,
                    label: undefined,
                    isDefault: 0,

                    latitude: '',
                    longitude: ''
                },
                tagMode: '',

                tagArr: [
                    { id: '1', name: '家' },
                    { id: '2', name: '公司' },
                    { id: '3', name: '学校' }
                ]
            };
        },
        onShow() {
            app.laterToken(bool => {
                app.logRecord('修改地址');
            });
        },
        onLoad(option) {
            console.log('有没得参数', this.$store.getters.userInfo);

            this.editId = option?.id;
            this.tagMode = option?.tag;

            this.initForm();
        },
        mounted() {},
        methods: {
            initForm() {
                if (!this.editId) {
                    this.$set(this.json, 'contactsPhone', this.$store.getters.userInfo.mobile);

                    return;
                }

                this.$axios({
                    url: 'flash/supermarket/user/address/get',
                    data: this.editId
                }).then(res => {
                    if (res.code == 200) {
                        Object.keys(this.json).map(key => {
                            this.$set(this.json, key, res.data[key]);
                        });
                    }
                });
            },

            goMap() {
                this.$refs['PrivacyContract'].goPrival();

                // wx.getPrivacySetting({
                //     success: (res) => {
                //         console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
                //         if (res.needAuthorization) {
                //             // 需要弹出隐私协议
                //             this.setData({
                //                 showPrivacy: true,
                //             })
                //         } else {
                //             // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
                //             // wx.getUserProfile()
                //             // wx.chooseMedia()
                //             // wx.getClipboardData()
                //             // wx.startRecord()
                //         }
                //     },
                //     fail: () => {},
                //     complete: () => {},
                // })

                // return
            },
            goChoose() {
                uni.chooseLocation({
                    success: res => {
                        console.log('选择的地区', res);

                        this.json.location = res.name;
                        this.json.deliveryAddress = res.address;

                        this.json.longitude = res.longitude;
                        this.json.latitude = res.latitude;

                        // this.setData({
                        //     addressData
                        // })
                    },
                    fail: e => {
                        console.error(e);
                    }
                });
            },
            radioChange(e) {
                // console.log('点击', e)

                this.json.sex = e.target.value;
            },
            switchLabel(item) {
                this.json.label = item.id;
            },
            switchDefault() {
                this.json.isDefault = this.json.isDefault == 1 ? 0 : 1;
            },
            //保存
            goSave() {
                let json = this.json;

                if (!json.latitude) {
                    uni.showToast({
                        title: '请先点击选择收货地址',
                        icon: 'none'
                    });
                    return;
                }

                if (!json.houseNumber) {
                    uni.showToast({
                        title: '请填写门牌号',
                        icon: 'none'
                    });
                    return;
                }

                if (!json.contacts) {
                    uni.showToast({
                        title: '请填写收货人名称',
                        icon: 'none'
                    });
                    return;
                }

                if (!json.contactsPhone) {
                    uni.showToast({
                        title: '请填写收货手机号码',
                        icon: 'none'
                    });
                    return;
                }

                if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(json.contactsPhone)) {
                    uni.showToast({
                        title: '请填写11位手机号码',
                        icon: 'none'
                    });
                    return;
                }

                console.log('json', json);

                this.submitFunc(json);
            },
            submitFunc(json) {
                this.$axios({
                    url: 'flash/supermarket/user/address/saveorupdate',
                    data: json
                }).then(res => {
                    console.log('保存成功', res);

                    uni.setStorageSync('addresId', res.data);

                    if (this.tagMode == 'buy') {
                        uni.setStorageSync('choose-addressId', res.data);
                    }

                    // uni.showToast()

                    uni.navigateBack();
                });
            },
            //删除
            delItem(row) {
                this.$axios({
                    url: 'flash/supermarket/user/address/batch/del',
                    data: [this.editId]
                }).then(res => {
                    uni.showToast({
                        title: '删除成功',
                        duration: 2000
                    });

                    uni.navigateBack();
                });
            }
        }
    };
</script>
<style lang="scss" scoped>
    .content {
        padding: 24rpx 30rpx 0;
    }
    .parts {
        background: #fff;
        padding: 30rpx 30rpx 14rpx;
        border-radius: 6px;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        &.bottm {
            padding-bottom: 50rpx;
        }
        .line {
            color: #333;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 20rpx 0;
            .l {
                text-align: left;
                margin-left: 10px;
                max-width: 500rpx;
                min-width: 120rpx;
            }
            .r {
                flex: 1;
                width: 100%;
                border-bottom: 1rpx solid #f1f1f1;
                padding-bottom: 20rpx;
                &.none {
                    border: none;
                }
            }
            .b {
                // font-weight: bold;
            }
            ::v-deep .holderClass {
                color: #c1c1c1;
            }
            .icon {
                color: #c1c1c1;
                font-size: 24rpx;
                line-height: 38rpx;
            }
            .address {
                font-size: 22rpx;
                color: #565656;
            }
        }
        .con {
        }
        .tags {
            .i {
                display: inline-block;
                padding: 8rpx 24rpx;
                border-radius: 3px;
                line-height: 1.2;
                font-size: 24rpx;
                margin-right: 16rpx;
                border: 1px solid #eaeaea;
                &.active {
                    color: #ff5305;
                    border-color: #ff5305;
                    &.full {
                        color: #fff;
                        border-color: #ff5305;
                        background: #ff5305;
                    }
                }
            }
        }
    }
    button::after {
        font-size: 0;
        display: none;
    }
</style>
